import React, { useState } from "react";
import { connect } from "react-redux";
import NavHeader from "@/components/NavHeader";
import actions from "@/store/actions/cart";
import Dog from "@/typings/dog";
import { CartItem } from "@/store/reducers/cart";
import { InputNumber, Popconfirm, Button,Table,Row,Col, Badge,Modal } from "antd";
import {getNumber} from "@/utils/utils"
import "./index.less";

function Cart(props: any) {
  let [settleVisible, setSettleVisible] = useState(false);
  const confirmSettle = () => {
    setSettleVisible(true);
  };
  const handleOk = () => {
    setSettleVisible(false);
    props.settle();
  };
  const handleCancel = () => {
    setSettleVisible(false);
  };
  const columns = [
    {
      title: "商品",
      dataIndex: "dog",
      render: (val: Dog, row: CartItem) => {
        return (
        <>
          <p>{val.title}</p>
          <p>单价:{val.price}</p>
        </>
      )},
    },
    {
      title: "数量",
      dataIndex: "count",
      render: (val: number, row: CartItem) => {
        return (
        <InputNumber
          size="small"
          min={1}
          max={10}
          value={val}
          onChange={(value: any) =>
            props.changeCartItemCount(row.dog.id, value)
          }
        />
      )},
    },
    {
      title: "操作",
      render: (val: any, row: CartItem) => (
        <Popconfirm
          title="是否要删除商品?"
          onConfirm={() => props.removeCartItem(row.dog.id)}
          okText="是"
          cancelText="否"
        >
          <Button size="small" type="primary">
            删除
          </Button>
        </Popconfirm>
      ),
    },
  ];
  const rowSelection = {
    selectedRowKeys: props.cart
      .filter((item: CartItem) => item.checked)
      .map((item: CartItem) => item.dog.id),
    onChange: (selectedRowKeys: string[]) => {
      props.changeCheckedCartItems(selectedRowKeys);
    },
  };
  let totalCount: number = props.cart
    .filter((item: CartItem) => item.checked)
    .reduce((total: number, item: CartItem) => total + item.count, 0);
  let totalPrice = props.cart
    .filter((item: CartItem) => item.checked)
    .reduce(
      (total: number, item: CartItem) =>
        total + getNumber(item.dog.price) * item.count,
      0
    );

  return (
    <div className="cart-container">
      <NavHeader history={props.history}>购物车</NavHeader>
      <Table
        rowKey={row => row.dog.id}
        rowSelection={rowSelection as any}
        columns={columns}
        dataSource={props.cart}        
        size="small"
      />
      <Row style={{ padding: "5px" }}>
        <Col span={4}>
          <Button type="primary" size="small" onClick={props.clearCartItems}>
            清空
          </Button>
        </Col>
        <Col span={9}>
          已经选择{totalCount > 0 ? <Badge count={totalCount}/> : 0}件商品
        </Col>
        <Col span={7}>总价: ¥{totalPrice}元</Col>
        <Col span={4}>
          <Button type="primary" size="small" onClick={confirmSettle}>
            去结算
          </Button>
        </Col>
      </Row>
      <Modal
        title="去结算"
        visible={settleVisible}
        onOk={handleOk}
        onCancel={handleCancel}
      >
        <p>请问你是否要结算?</p>
      </Modal>
    </div>
  );
}

const mapStateProps = (state: any) => state;
export default connect(mapStateProps, actions)(Cart);
